<!-- 基础使用示例页面 -->
<template>
  <div class="p-6">
    <!-- 1. 页面头部：主题切换 -->
    <div class="flex-between mb-6">
      <h1 class="text-2xl font-bold">用户管理</h1>
      
      <!-- 快速主题切换（可选） -->
      <div class="flex gap-2">
        <el-button 
          @click="setThemeMode(isDark ? 'light' : 'dark')"
          :icon="isDark ? 'Sunny' : 'Moon'"
          circle
        />
        <el-dropdown @command="setThemeColor">
          <el-button type="primary">
            主题色 <el-icon><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="#409eff">默认蓝</el-dropdown-item>
              <el-dropdown-item command="#67c23a">绿色</el-dropdown-item>
              <el-dropdown-item command="#e6a23c">橙色</el-dropdown-item>
              <el-dropdown-item command="#f56c6c">红色</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 2. 功能区域：所有组件自动跟随主题 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6 mb-6">
      <h2 class="text-lg font-semibold mb-4">搜索筛选</h2>
      
      <el-form :model="searchForm" inline>
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- primary 按钮自动跟随主题色 -->
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 3. 操作区域 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-6 mb-6">
      <div class="flex-between mb-4">
        <h2 class="text-lg font-semibold">用户列表</h2>
        <div class="flex gap-2">
          <!-- primary 按钮跟随主题，其他保持默认 -->
          <el-button type="primary" @click="handleAdd">新增用户</el-button>
          <el-button type="success" @click="handleExport">导出数据</el-button>
          <el-button type="warning" @click="handleImport">批量导入</el-button>
        </div>
      </div>

      <!-- 4. 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <!-- 标签自动跟随Element Plus默认色彩 -->
            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
              {{ row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <!-- primary 按钮跟随主题色 -->
            <el-button type="primary" size="small" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 5. 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-4">
        <div class="flex items-center">
          <div class="text-3xl font-bold text-blue-500">1,234</div>
          <el-tag type="primary" size="small" class="ml-2">总用户</el-tag>
        </div>
      </div>
      
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-4">
        <div class="flex items-center">
          <div class="text-3xl font-bold text-green-500">1,180</div>
          <el-tag type="success" size="small" class="ml-2">活跃用户</el-tag>
        </div>
      </div>
      
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-4">
        <div class="flex items-center">
          <div class="text-3xl font-bold text-orange-500">54</div>
          <el-tag type="warning" size="small" class="ml-2">待审核</el-tag>
        </div>
      </div>
      
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border p-4">
        <div class="flex items-center">
          <div class="text-3xl font-bold text-red-500">12</div>
          <el-tag type="danger" size="small" class="ml-2">已禁用</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme'

// 🎯 核心：只需要这一行就能获得完整的主题功能
const { isDark, setThemeMode, setThemeColor } = useTheme()

// 页面数据
const searchForm = ref({
  username: '',
  status: ''
})

const tableData = ref([
  { id: 1, username: '张三', email: 'zhangsan@example.com', status: 1 },
  { id: 2, username: '李四', email: 'lisi@example.com', status: 0 },
  { id: 3, username: '王五', email: 'wangwu@example.com', status: 1 }
])

// 页面方法
const handleSearch = () => {
  console.log('搜索用户', searchForm.value)
}

const handleReset = () => {
  searchForm.value = { username: '', status: '' }
}

const handleAdd = () => {
  console.log('新增用户')
}

const handleEdit = (row) => {
  console.log('编辑用户', row)
}

const handleDelete = (row) => {
  console.log('删除用户', row)
}

const handleExport = () => {
  console.log('导出数据')
}

const handleImport = () => {
  console.log('批量导入')
}
</script>
